<template>
  <page class="echats">
    <page-header>
      <x-header class='head' :left-options="{backText: ''}">设备使用率
        <a slot="right">
          <div @click="handleClick" style="color: #fff;">
            <i class="iconfont icon-shaixuanguolv"></i>
          </div>
        </a>
      </x-header>
    </page-header>
    <page-content :scroll="false">
      <!--侧边栏-->
      <mt-popup v-model="popupVisible" position="right" style='width: 17rem;height: 100%;'>
        <div class="stop"></div>
        <div class="btn">
          <button class="rec">重置</button>
          <button class="qued" @click="hide()">确定</button>
        </div>

        <div class="choice">
          <div class="choice-c">
            <span>设备名称</span>
            <select class="choice-k">
              <option value="请选择设备类型">请选择设备</option>
              <option value="主机">塔吊</option>
              <option value="配件">电梯</option>
            </select>
          </div>
        </div>

        <div class="choice">
          <div class="choice-c">
            <span>使用率</span>
            <select class="choice-k">
              <option value="请选择设备类型">请选择使用率</option>
              <option value="主机">台天使用率</option>
              <option value="配件">吨米使用率</option>
            </select>
          </div>
        </div>

        <div class="choice">
          <div class="choice-c">
            <span>统计天数</span>
            <select class="choice-k">
              <option value="请选择设备类型">请选择统计天数</option>
              <option value="主机">当天</option>
              <option value="配件">当月</option>
            </select>
          </div>
        </div>
      </mt-popup>
      <!--侧边栏-->

      <div id="myChart"></div>
    </page-content>
  </page>
</template>

<script>
import { XHeader } from 'vux'
let echarts = require('echarts/lib/echarts')
//  引入柱状图组件
require('echarts/lib/chart/bar')
//  引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'DeviceEcharts',
  components: {
    XHeader
  },
  data () {
    return {
      popupVisible: false
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    hide () {
      this.popupVisible = false
    },
    handleClick: function () {
      this.popupVisible = true
    },
    drawLine () {
      //  基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      //  绘制图表
      myChart.setOption({
        title: { text: '庞源塔吊利用率' },
        tooltip: {
          show: false
        },
        xAxis: {
          position: 'top'
        },
        yAxis: {
          data: ['湖北', '海南', '湖南', '上海', '安徽', '南通'],
          axisLabel: {
            // rotate:-90,
            margin: 6
          }
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 50, 60, 80]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.echats {
  height: 100%;
  width: 100%;
  .iconfont {
    font-size: 1.5rem;
  }
  #myChart {
    width: 300px;
    height: 300px;
    margin-left: 1rem;
  }
  .btn {
    display: flex;
  }
  .rec {
    width: 8.5rem;
    border: none;
    height: 2.5rem;
    background: #fff;
    color: #000;
    border-bottom: 1px solid #f5f5f5;
  }
  .qued {
    width: 8.5rem;
    border: none;
    background: #1e82d2;
    color: #fff;
  }
  .choice-k option {
    font-size: 1rem !important;
  }
  .choice {
    width: 100%;
    height: 3rem;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
  }
  .choice-c {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
  .choice span {
    line-height: 2rem;
    font-size: 0.8rem;
  }
  .choice-k {
    width: 60%;
    float: right;
    line-height: 2rem;
    height: 2rem;
    border: none;
    color: #606063;
    font-size: 0.8rem !important;
  }
  .stop {
    width: 100%;
    height: 1.25rem;
    background: #1e82d2;
  }
  .top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 1.25rem;
    background: #1e82d2;
  }
  .head {
    position: fixed;
    top: 1.25rem;
    width: 100%;
    background: #1e82d2;
    font-size: 1.125rem;
    height: 3rem;
  }
  .kong {
    height: 4.25rem;
  }
}
</style>
